@{ Layout = "../Shared/_Layout.cshtml"; } @section Navs{
<div class="card-box">
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="pageAdministrator.aspx">管理员管理</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="pageAdminRole.aspx">角色管理</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="pageAdminConfiguration.aspx">管理员设置</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="pageAdminDepartment.aspx">所属部门管理</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="pageAdminArea.aspx">所在区域管理</a>
    </li>
    <li class="nav-item active">
      <a class="nav-link" href="pageAdminAccessTokens.cshtml">API密钥管理</a>
    </li>
  </ul>
</div>
}

<template v-if="pageType === 'add'">
  <div class="card-box">
    <div class="m-t-0 header-title">
      {{ item.id ? '修改API密钥' : '添加API密钥' }}
    </div>

    <div class="form-group">
      <label class="col-form-label">
        名称
      </label>
      <input v-model="item.title" type="text" class="form-control" />
    </div>

    <div class="form-group">
      <label class="col-form-label">
        关联管理员
      </label>
      <select v-model="item.adminName" class="form-control">
        <option v-for="adminName in adminNames" selected="adminName === item.adminName" v-bind:value="adminName">
          {{ adminName }}
        </option>
      </select>
      <small class="form-text text-muted">
        关联管理员定义API密钥的访问权限，API密钥的访问权限将被限制在此管理员的权限范围内
        <a href="https://docs.siteserver.cn/api/" target="_blank">阅读更多</a>
      </small>
    </div>

    <div class="form-group">
      <label class="col-form-label">
        授权范围
      </label>

      <div class="checkbox checkbox-primary">
        <template v-for="scope in scopes">
          <input type="checkbox" v-bind:id="scope" v-bind:value="scope" v-model="item.scopeList" />
          <label v-bind:for="scope">{{ scope }}</label>
        </template>
      </div>

      <small class="form-text text-muted">
        授权范围定义API密钥可访问的API地址，API密钥能够访问的API地址将被限制在授权范围内
        <a href="https://docs.siteserver.cn/api/" target="_blank">阅读更多</a>
      </small>
    </div>

    <hr />

    <button class="btn btn-primary" v-on:click="btnSubmitClick">确 定</button>
    <button class="btn" v-on:click="btnCancelClick">返 回</button>

  </div>
</template>
<template v-else>
  <div class="card-box">
    <p class="text-muted font-13 m-b-25">
      <a href="javascript:;" class="btn btn-success m-l-5" v-on:click="btnAddClick({})">添加新密钥</a>
    </p>

    <div id="modal" style="display: none; padding: 10px 20px;">
      <div class="form-group form-row">
        <label class="col-3 text-right col-form-label">名称</label>
        <label class="col-5 text-left col-form-label">名称</label>
        <div class="col-4 help-block"></div>
      </div>

      <div class="form-group form-row">
        <label class="col-3 text-right col-form-label">API密钥</label>
        <div class="col-5 form-control-plaintext">
          <code style="font-size: 16px">
          {{ item && item.accessToken }}
        </code>
        </div>
        <div class="col-4 help-block">
          <button v-on:click="btnRegenerateClick(item)" class="btn btn-success m-l-5">重 设</button>
        </div>
      </div>

      <div class="form-group form-row">
        <label class="col-3 text-right col-form-label"></label>
        <div class="col-8 form-control-plaintext">
          添加时间： {{ item && item.addDate }} 更新时间： {{ item && item.updatedDate }}
        </div>
        <div class="col-1 help-block"></div>
      </div>

      <hr />

      <div class="text-right mr-1">
        <button v-on:click="btnCancelClick" class="btn btn-default m-l-5">关 闭</button>
      </div>
    </div>

    <div class="panel panel-default">
      <div class="panel-body p-0">
        <div class="table-responsive">
          <table id="contents" class="table tablesaw table-hover m-0">
            <thead>
              <tr class="thead">
                <th>名称</th>
                <th>关联管理员</th>
                <th>授权范围</th>
                <th class="text-center">操作</th>
              </tr>
            </thead>
            <tbody>

              <tr v-for="item in items">
                <td class="text-nowrap">
                  {{ item.title }}
                </td>
                <td class="text-nowrap">
                  {{ item.adminName }}
                </td>
                <td class="text-nowrap">
                  {{ item.scopes }}
                </td>
                <td class="text-center text-nowrap">
                  <a href="javascript:;" v-on:click="btnViewClick(item)" class="btn btn-primary m-r-5">获取密钥</a>
                  <a href="javascript:;" v-on:click="btnAddClick(item)" class="btn btn-success m-r-5">编 辑</a>
                  <a href="javascript:;" v-on:click="btnDeleteClick(item)" class="btn btn-danger m-r-5">删 除</a>
                </td>
              </tr>

            </tbody>
          </table>

        </div>
      </div>
    </div>
  </div>
</template>

@section Scripts{
<script src="pageAdminAccessTokens.js?v=6.4.1" type="text/javascript"></script> }